<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2022-05-27 14:14:29
-->
<template>
  <CDrawer v-model="dialogVisible" title="HFCs&PFCs气体详情">
    <div class="search-wrap">
      <el-input
        placeholder="因子名称"
        @input="handleInputChange"
        style="width: 100%"
        class="g-mb8"
        clearable
        v-model="factorName"
      >
        <template #suffix>
          <CIcon type="c-xian-sousuo"></CIcon>
        </template>
      </el-input>
      <CTable :dataSource="tableData" useDataSource :pagination="false">
        <vxe-column title="适用因子/因子编号" field="factorName" align="left">
          <template #default="scope">
            <CTableColumn
              :main-text="scope.row.factorName"
              :sub-text="scope.row.factorNo"
            ></CTableColumn>
          </template>
        </vxe-column>
        <vxe-column title="GWP值" field="gwp" align="right"> </vxe-column>
      </CTable>
      <div class="page-wrap">
        <el-pagination
          class="c-pagination"
          size="normal"
          v-model:currentPage="currentPage"
          :page-sizes="paginationPageSizes"
          :page-size="pageSize"
          :pager-count="5"
          layout="total, prev, slot, next"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :prev-icon="CIconArrowLeft"
          :next-icon="CIconArrowRight"
        >
          <span> {{ totalPages ? currentPage : 0 }} / {{ totalPages }}</span>
        </el-pagination>
      </div>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'GwpDrawer'
};
</script>
<script lang="ts" setup>
import { CDrawer } from '@/components/CDrawer/index';
import baseConfig from '@/config';
import { defineProps, withDefaults, defineEmits, computed, ref, watch } from 'vue';
import { getGwpFactorList } from '@/apis/system/config/gwp';
import { debounce } from 'lodash';
import { CTable, CTableColumn } from '@/components/CTable/index';
import CIconArrowLeft from '@/components/CIconArrowLeft/index.vue';
import CIconArrowRight from '@/components/CIconArrowRight/index.vue';
interface SelectFillTypeDialogProps {
  visible: boolean;
  gwpId: string | number;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible']);
const totalCount = ref(0);
const totalPages = ref(0);

const currentPage = ref(1);
const pageSize = ref(baseConfig.DEFAULT_PAGE_SIZE);
const paginationPageSizes = ref(baseConfig.DEFAULT_PAGE_SIZES);
const factorName = ref('');
const dialogVisible = computed<boolean>({
  get: () => {
    console.log(props.visible);

    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      if (props.gwpId) {
        factorName.value = '';
        loadData();
      }
    }
  }
);
const tableData = ref<any[]>([]);
const loading = ref(false);
const loadData = async () => {
  loading.value = true;
  try {
    let param = {
      size: pageSize.value,
      current: currentPage.value,
      gwpId: props.gwpId,
      factorName: factorName.value
    };
    let data = await getGwpFactorList(param);
    tableData.value = data.records;
    totalCount.value = data.total;
    totalPages.value = data.pages;
  } finally {
    loading.value = false;
  }
};
const handleInputChange = debounce(() => {
  loadData();
}, 600);
const handleSizeChange = (size: number) => {
  currentPage.value = 1;
  pageSize.value = size;
  loadData();
};

// 当前页码改变
const handleCurrentChange = (page: number) => {
  console.log('handleCurrentChange', page);
  currentPage.value = page;
  loadData();
};
</script>
<style lang="scss" scoped>
.search-wrap {
  width: 100%;
  padding: 12px 16px;
}
.page-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 14px 0;
}
</style>
